<template>
  <div>


	<myheader></myheader>
	<section class="featured-block text-center">
		<div class="container">
			<div>
				<img :src="src" alt="">
				<Avatar :src="src" :width="150" fit="fill"></Avatar>
			</div>
			<br>
			<Button @click="changepic" color="blue">{{ mybutton }}</Button>

				<table>
					<tr>
						<td>
							用户头像:
						</td>
						<td>
							<input type="file" @change='upload'>
					
						</td>
					</tr>
					<tr>
						<td>
							七牛云上传:
						</td>
						<td>
							<input type="file" @change='upload_qiniu'>
						
							<br>
							<!--进度条展示-->
							<Progress v-show="load_int" :percent="load_int" color="green">
								<span slot="test">{{ load_percent }}</span>
							</Progress>

					
						</td>
					</tr>

					<tr>
						<td></td>
						<td>

							<video id="video" v-show="videosrc" width="300" height="200" :src="videosrc" 
							controls="controls" autoplay="autoplay"></video>
					

						</td>
					</tr>
				</table>

		</div>
	</section>
	<myfooter></myfooter>
  </div>
</template>
<script>

//导入组件
import myheader from './myheader'
import myfooter from './myfooter'

//导入文件
import {config,formatXml} from '../config.js'


export default {
  data () {
    return {
		msg: "这是一个变量",
		//整形进度
		load_int:0,
		//上传进度展示
		load_percent:'',
		//七牛云token
		token:'',
		src:'',
		//视频地址
		videosrc:'',
		//切换按钮变量
      	mybutton:'画中画',
	  //面包屑导航变量
	  datas:[{title:'首页',route:{name:'index'}},{title:'登录页面'}]
    }
  },
  //注册组件标签
  components:{
	  'myheader':myheader,
		'myfooter':myfooter,

  },
  mounted:function(){

		//获取最新的token
		this.get_token();

		//调用用户信息
		this.get_userinfo();



},
  methods:{
	  
	  //用户信息接口
	  get_userinfo:function(){
		  			 //请求后台接口
		  this.axios.get('http://127.0.0.1:8000/userinfo/',{params:{uid:localStorage.getItem('uid'),jwt:localStorage.getItem('jwt')}}).then((result)=>{

				console.log(result);
				this.src = 'http://localhost:8000/static/upload/'+ result.data.img;
			
			});


	  },






		get_token:function(){

			 //请求后台接口
		  this.axios.get('http://127.0.0.1:8000/qiniu/').then((result)=>{

				console.log(result);

				this.token = result.data.token;

				console.log(this.token);

			
			});

		},
		//画中画切换方法
      	changepic:function(){

          //判断是否处于画中画界面
          if(video != document.pictureInPictureElement){

              //尝试进入画中画模式
              video.requestPictureInPicture();

              this.mybutton = '退出画中画'

          }else{
              //推出画中画
              document.exitPictureInPicture();

              this.mybutton = '进入画中画'
          }

      },
		upload_qiniu:function(e){

			//获取文件
			let file = e.target.files[0];

			//声明表单参数
			let param = new FormData();

			param.append('file',file,file.name);
			param.append('token',this.token);

				//自定义axios
				const axios_qiniu = this.axios.create({withCredentials:false});

				//发送请求
				axios_qiniu({
					method:'POST',
					url:'http://up-z1.qiniu.com/',
					data:param,
					timeout:30000,
					//上传过程中的方法
					//箭头方法方便调用this关键字
					onUploadrogress:(e)=>{
						
						//计算上传百分比
						var complete = (e.loaded / e.total);

						//处理美化
						if(complete < 1){
							this.load_percent = (complete * 100).toFixed(2) + '%';

							this.load_int = parseInt((complete * 100).toFixed(2) + '%');
						}

					}	
				}).then(result =>{

					//手动赋值100%  进度条
					this.load_percent = '100%';
					//进度条手动赋值
					this.load_int = 100;

					console.log(result)

					this.src = 'http://q9kt8ih9p.bkt.clouddn.com/'+result.data.key;
					this.videosrc = config['baseurl']+result.data.key;

				});

		},

	  //定义提交事件
	  upload:function(e){

			//获取文件
			let file = e.target.files[0];

			//声明表单参数
			let param = new FormData();


		// 三个参数文件的key  文件的实体  文件名
			param.append('file',file,file.name);
			param.append('uid',localStorage.getItem('uid'));

			//声明请求头
			let config ={headers:{'Content-Type':'multipart/form-data'}}


		  //请求后台接口
		  this.axios.post('http://127.0.0.1:8000/upload/',param,config).then((result)=>{

				console.log(result);
				this.src = "http://localhost:8000/static/upload/"+ result.data.filename


			});

	  }
  }
}
</script>
<style>
td{
	padding:10px
}
.imgcode {
	cursor: pointer;
}
</style>
